<template>
  <div>
    <!--<div class="">-->
    <button @click="openBluetoothAdapter">开始扫描</button>
    <!--<button @click="stopBluetoothDevicesDiscovery">停止搜索</button>-->
    <button @click="closeBluetoothAdapter">结束流程</button>

    <div class="title_info" v-if="open_ble" style="padding: 10px;">
      <div class="devices_summary">已发现 {{lengths}}个外围设备：</div>
      <div style="border: solid 1px #ddd">
        <div class="info_list clearfix" v-for="(item,index) in devices" :key="index">
            <div class="deviceName fl_l" style="padding: 5px;">{{index+1}} --- 设备名称：<span style="color: red">{{item.name}}</span></div>
            <div class="connect fl_r" v-if="item.name !='未知设备'" @click="connectTT(item.deviceId)" >连接</div>
        </div>
      </div>
    </div>
    <div class="ble_popup" v-else >
      <div class="popup_f" style="position: fixed;width: 100%;height: 100%;background: black;top: 0;left: 0;opacity: 0.5;z-index: -1;"></div>
      <div class="open_eg">请打开蓝牙</div>
      <div class="i_know" @click="i_know">我知道了</div>
    </div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      open_ble:true,
      toastTitle:'',
      is_show:true,
      devices:'',
      deviceId:0,
      lengths:0,
      connectedDeviceId:0,
      serviceId_two:0,
      notifyCharacteristicsId:0,
      if_name:false,
    }
  },
  mounted() {
    this.closeBluetoothAdapter()
    this.openBluetoothAdapter()


  },
  methods: {
    tiaozhuan(){
      wx.reLaunch({
        url: "/pages/logs/main"
      });
    },
    i_know(){
      // var that = this;
      this.open_ble = true;
      this.devices = ''
      this.lengths = 0
      // that.openBluetoothAdapter()
    },
    //1.首先是要初始化蓝牙：openBluetoothAdapter()
    openBluetoothAdapter(){
      var that = this;
      if (wx.openBluetoothAdapter) {
        wx.openBluetoothAdapter({
          success: function(res) {
            console.log("获取本机的蓝牙状态success",res); /* 获取本机的蓝牙状态 */
            wx.showToast({
              title: "蓝牙已打开",
              icon: "success",
              duration: 2000
            });
            that.open_ble = true
            that.getBluetoothAdapterState()
          },
          fail: function(err) {
            // 初始化失败
            console.log(err,"err")
            that.open_ble = false

          }
        })
      } else {

      }
    },
    //2.检测本机蓝牙是否可用： 要在上述的初始化蓝牙成功之后回调里调用
    getBluetoothAdapterState() {
      var that = this;
      that.toastTitle = '检查蓝牙状态'
      wx.getBluetoothAdapterState({
        success: function(res) {
          console.log("2.检测本机蓝牙是否可用：",res)
          that.startBluetoothDevicesDiscovery()
        },
        fail(res) {
          console.log(res)
        }
      })
    },
    //3.开始搜索蓝牙设备
    startBluetoothDevicesDiscovery() {
      var that = this;
      setTimeout(() => {
        wx.startBluetoothDevicesDiscovery({
          success: function(res) {
            console.log("3开始搜索蓝牙设备：",res)
            /* 获取蓝牙设备列表 */
            that.getBluetoothDevices()
          },
          fail(res) {
          }
        })
      }, 1000)
    },

    //结束流程
    closeBluetoothAdapter(){
      this.devices = ''
      this.lengths = 0
      wx.closeBluetoothAdapter({
        success (res) {
          console.log(res)
        }
      })
    },
    //#4. 获取搜索到的蓝牙设备列表
    getBluetoothDevices() {
      var that = this;
      setTimeout(() => {
        wx.getBluetoothDevices({
          services: [],
          allowDuplicatesKey: false,
          interval: 0,
          success: function(res) {
            console.log("4. 获取搜索到的蓝牙设备列表",res)
            that.devices = res.devices;
            that.lengths = res.devices.length;
            res.devices.forEach(function (item, index) {
              console.log(item.name);
              if(item.name !== "未知设备"){
                that.if_name = true
              }else{

              }
            });
          },
          fail(res) {
            console.log(res, '获取蓝牙设备列表失败=====')
          }
        })
      }, 2000)
    },
    //跳转
    connectTT(i){
      wx.navigateTo({
        url: `/pages/logs/main?deviceId=${i}`
      });
    },




  },

  created () {
  }
}
</script>

<style scoped>
  i_know::after{
    color: orchid;
    background: #cb96da;
    font-size: 50px;
  }
  /*.page_all{ width: 100%;height: 100%;background-size: 100% 100%;position: fixed;background-image: url()}*/

  /*清除浮动*/
  /* IE6、7 专有 */
  .clearfix { zoom: 1;}
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .fl_l{ float: left; }
  .fl_r{ float: right; }
  .connect{
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background: cornflowerblue;
    color: #fff;
    right: 7px;
  }
.ble_popup{
  width: 70%;
  position: fixed;
  font-size: 19px;
  color: #333;
  text-align: center;
  margin: 55px;
  border-radius: 10px;
  border: 1px solid #ddd;
  z-index: 6;
}
.ble_popup .open_eg{
  padding: 10px;
  background: #cb96da;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  color: #fff;
}
.ble_popup .i_know{
  padding: 10px;
  background: aliceblue;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;

}
  .info_list{
    padding: 20px;
    border-bottom:1px solid #ddd;
  }

</style>
